利用JavaScript将HTML表格导出为Excel文件

59次阅读
没有评论

共计 1687 个字符,预计需要花费 5 分钟才能阅读完成。

网上各种找

首先,肯定是找一下有没有别人写好的库,自己写不现实的。最终找到了 js-xlsx,评价还不错,不过已经好久没有更新了,将就用用看咯。

js-xlsx 虽然支持修改导出文件的样式,不过是在它的专业版中,其分为社区版和专业版,社区版是开源的,但是却不支持修改导出文件的样式,专业版拥有更多的功能,这其中就包括修改样式。如果需要使用专业版,要邮件联系开发者,去咨询价格,购买它。

好在又找到了 xlsx-style 这个项目(同样的好久没有更新了,凑合着用),它可以对导出的 excel 文件进行一些样式上的修改。

开干

<script src="js/xlsx.extendscript.js"></script>
<script src="js/xlsx-style/xlsx.full.min.js"></script>
<script src="js/export.js"></script>

<script>
  function btn_export() {var table1 = document.querySelector("#table1")
    var sheet = XLSX2.utils.table_to_sheet(table1)

    // 设置合并单元格垂直居中
    sheet["!merges"].forEach((item) => {
      var col = "0"
      var row = item.s.r + 1
      switch (item.s.c) {
        case 0:
          col = "A"
          break
        case 1:
          col = "B"
          break
        case 2:
          col = "C"
          break
        case 3:
          col = "D"
          break
      }

      if (col == "D") {sheet[col + row].t = "n"
        sheet[col + row].s = {
          alignment: {
            vertical: "center",
            horizontal: "center",
            wrapText: true,
          },
        }
      } else {sheet[col + row].s = {
          alignment: {
            vertical: "center",
            wrapText: true,
          },
        }
      }
    })

    // 设置 D 列垂直居中
    for (var i = 2; i <= sheet["!merges"][0].e.r + 1; i++) {sheet["D" + i].t = "n"
      sheet["D" + i].s = {
        alignment: {
          vertical: "center",
          horizontal: "center",
          wrapText: true,
        },
      }
    }

    // 设置单元格列宽
    sheet["!cols"] = [{wch: 14,},
      {wch: 20,},
      {wch: 20,},
    ]

    openDownloadDialog(sheet2blob(sheet), " 下载.xlsx")
  }
</script>

一般情况下用 xlsx.core.min.js 就够了,xlsx.full.min.js 则是包含了所有功能模块。

但是,xlsx.full.min.js 和 xlsx-style/xlsx.full.min.js(两个 js 都加密了)暴露出来的变量都叫 XLSX,xlsx-style 这个 js 文件里又没有 XLSX.utils 这个方法,还是后引入的,就会把前面的 XLSX 给覆盖了,所以会报错。

解决方法是删掉 xlsx.full.min.js,改用 xlsx.extendscript.js(这个 js 没加密),并把暴露出来的变量修改为 XLSX2

其他库

如果觉得 xlsx-style 的功能不够全面,不能实现需求,这里再推荐一个项目 ExcelJS,这个项目的功能更加全面,而且项目也还在维护,可以试试看能否满足需求。

关联资源下载

包含 3 个 js 文件。

下载地址:https://gaga.lanzoum.com/ixnMF0xz6wwj

参考

正文完
 0
三毛笔记
版权声明:本站原创文章,由 三毛笔记 于2023-08-02发表,共计1687字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)